import { Component } from 'react'
import { Card,WithState,WithProps, WithLifeCycle, FunctionCard, WithHooks } from "./examples";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      options: [
        {
          value: "apple",
          name: "苹果",
        },
        {
          value: "pineapple",
          name: "菠萝",
        },
        {
          value: "orange",
          name: "橘子",
        },
      ],
    };
  }

  render(){
    const {value,options} = this.state;
  
  return(
    <div className="App">
      <Card title="State 演示">
        <WithState />
      </Card>
      <Card title="State 演示">
        <WithProps 
        value={value}
        options={options}
        onChange={(v) =>
        this.setState({
          value:v,
          })
         }
        />
       <div>你选择了{value}</div>
      </Card>
      <Card title="生命周期演示">
        <WithLifeCycle />
      </Card>
      <FunctionCard title="函数式卡片">
        <WithHooks />
      </FunctionCard>
    </div>
  );
  }
}

export default App;